import React from 'react';
import { connect } from 'dva';
import { TabBar, Icon,Modal,ActivityIndicator } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import content from '../../common/contentCss/content.css';
import CustTitle from '../../common/title/title';
import Summary from './pages/summary/summary';
import Describe from './pages/describe/describe';
import EnterpriseInformation from './pages/enterpriseInformation/enterpriseInformation';
import FootBtn from './pages/footBtn/footBtn';
import SlidePicture from './pages/slidePicture/slidePicture';
import JobConsult from './pages/jobConsult/jobConsult';
import token from '../../../../framework/utils/token';

import arrowIcon from '../../../../icons/personal/arrow.png';
import writeIcon from '../../../../icons/personal/write-icon.png';

const alert = Modal.alert;

function PartTimeDetail({
  dispatch,
  loading,
  partTimeDetail
}) {

  let { list, isAlert,isHandlWorkEnks } = partTimeDetail;

  // console.log('list', JSON.stringify(list));

  const handleWorkEnts = (workEnts) => {
    if(!workEnts || workEnts.length == 0){
      return;
    }
    let newWorkRnts = [];
    workEnts.map((item, index) => {

      if(!item.width && !item.height){
        let img_url = item.url + '?' + Date.parse(new Date());
        // 创建对象
        let img = new Image();
        // 改变图片的src
        img.src = img_url;
        img.onload = function(){

          // 打印
          // console.log('width:'+img.width+',height:'+img.height);
          item.width = img.width;
          item.height = img.height;
          newWorkRnts.push(item);
          if(workEnts.length == (index+1)){
            if(isHandlWorkEnks){
              list.workEnts = newWorkRnts;
              // console.log('newWorkRnts', JSON.stringify(newWorkRnts));
              dispatch({
                type:'partTimeDetail/querySuccess',
                payload:{
                  list,
                  isHandlWorkEnks:false,
                }
              })
            }
          }
        }
      }
    })
  }

  // console.log('list', JSON.stringify(list));

  const slidePicturProps = {
    list:list.workEnts,
    isHandlWorkEnks
  }

  const summaryProps = {
    list,
    mapClick(companyName, latitude,longitude){
      dispatch({
        type:'txMap/querySuccess',
        payload:{
          companyName,
          latitude,
          longitude,
        }
      })
      dispatch(routerRedux.push({
        pathname: '/tx-map',
        query: {
        }
      }));
    }
  }

  const titleProps = {
    titleName:'职位信息',
    goBack(){
      dispatch(routerRedux.goBack());
    },
  }

  const MarginHeight = () => <div style={{height: '0.6em', backgroundColor:'#F2F2F2'}}></div>;

  const customer = list.customer == undefined ? '' : list.customer
  const enterpriseInformationProps = {
    customer,
    onViewClick(id){
      dispatch(routerRedux.push({
        pathname: '/enterprise-information',
        query: {
          id,
        }
      }));
    }
  }

  const describeProps = {
    titleName:'兼职描述',
    content:list.description,

  }

  const footBtnProps = {
    list,
    onCollection(){
      console.log('收藏');
      dispatch({
        type: 'partTimeDetail/onCollection',
        payload: {
        }
      })
    },
    onConsultation(){
      console.log('咨询');
      const tokenValue = token.get();
      if(!tokenValue){
        window.location.href = window.document.location.origin + '/register.html#/login';
      }else{
        dispatch(routerRedux.push({
          pathname: '/consultation',
          query:{
            id:list.id
          }
        }));
      }

    },
    onSignUp(){
      // console.log('兼职id报名',list.id);
      dispatch({
        type: 'partTimeDetail/onSignUp',
        payload: {
          id: list.id
        }
      })
    },
    onFavors(id,favors){

      dispatch({
        type: 'partTimeDetail/onFavors',
        payload: {
          id,
          favors
        }
      })
    }
  }

  const jobConsultProps = {
    titleName:'兼职咨询',
    jobConsults:list.jobConsults,
    onTotal() {
      dispatch(routerRedux.push({
        pathname: '/job-consult-list',
      }));
    }
  }

  const showAlert =()=>{
    const alertInstance = alert('提示', '请完善基本信息！', [
      { text: '取消', onPress: () => console.log('cancel'), style: 'default' },
      { text: '去完善', onPress: () => {

        dispatch(routerRedux.push({
          pathname: '/simple-info',
        }));

      }}
    ])
  }

  if(isAlert){
    dispatch({
      type:'partTimeDetail/querySuccess',
      payload:{
        isAlert:false,
      }
    })
    showAlert();
  }

  return (
    <div className={content.content}>
      <CustTitle {...titleProps}/>
      <div style={{
        marginTop: '2.9em',
        paddingBottom:'3.25em'
      }}>
        <SlidePicture {...slidePicturProps}/>
        <Summary {...summaryProps}/>
        <MarginHeight/>
        <Describe {...describeProps}/>
        <MarginHeight/>
        <EnterpriseInformation {...enterpriseInformationProps}/>
        <MarginHeight/>
        <JobConsult {...jobConsultProps}/>
        {/* <MarginHeight/> */}
      </div>

      <FootBtn {...footBtnProps}/>

      <ActivityIndicator
        toast
        text=""
        animating={loading}
      />
      {handleWorkEnts(list.workEnts)}
    </div>
  )
}

PartTimeDetail.propTypes = {
};

function mapStateToProps(state, ownProps) {
  return {
    loading: state.loading.global,
    partTimeDetail: state.partTimeDetail
  }
}
export default connect(mapStateToProps)(PartTimeDetail);
